import { Button, Form, Table, Tag } from 'antd';
import React, { useState } from 'react';
import { useAntdTable } from 'ahooks';
import { getTableData } from '@/service/list.service';
import Search from '@/pages/list/search';
import CustomModal from '@/component/custom-modal/custom-modal';
import Edit from '@/pages/list/edit';

export default () => {
  const [form] = Form.useForm();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const { tableProps, search, params } = useAntdTable(getTableData, {
    defaultPageSize: 10,
    form,
  });

  function onSelectChange(newSelectedRowKeys: React.Key[]) {
    setSelectedRowKeys(newSelectedRowKeys);
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const { type, changeType, submit, reset } = search;
  const columns = [
    {
      title: 'name',
      dataIndex: ['name', 'last'],
    },
    {
      title: 'email',
      dataIndex: 'email',
    },
    {
      title: 'phone',
      dataIndex: 'phone',
    },
    {
      title: 'gender',
      dataIndex: 'gender',
      render: (text: string, record: Item) => {
        const color = text === 'female' ? 'geekblue' : 'green';
        const gender = text === 'female' ? '女' : '男';
        return <Tag color={color}>{gender}</Tag>;
      },
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: () => {
        return (
          <>
            <CustomModal
              Component={Edit}
              onOk={handleEdit}
              modalProps={{ title: '编辑' }}
            >
              <Button type="link">Link Button</Button>
            </CustomModal>
          </>
        );
      },
    },
  ];

  function handleEdit(value: any) {
    console.log(value);
  }

  return (
    <>
      <div>
        <Search form={form} reset={reset} submit={submit} />
      </div>
      <Table
        columns={columns}
        rowKey="code"
        {...tableProps}
        bordered={true}
        rowSelection={rowSelection}
      />
    </>
  );
};
